<template>
    <div class="paper" v-loading="loading">
        <Query @change="getData" :prop="['ids', 'time', 'title', 'type']"/>
        <div>
            <el-table
            stripe
            :data="data.records"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题">
                </el-table-column>
                <el-table-column
                    label="类型">
                    <template slot-scope="scope">
                        <el-tag
                        type="success"
                        disable-transitions>{{ types[scope.row.type] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否启用">
                    <template slot-scope="scope">
                        <el-tag
                            :type="numberType[scope.row.status]"
                            disable-transitions>{{ statusList[scope.row.status] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="显示分数">
                    <template slot-scope="scope">
                        <el-tag
                            :type="numberType[scope.row.showScore]"
                            disable-transitions>{{ showScoreList[scope.row.showScore] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="题目数量">
                    <template slot-scope="scope">
                        {{ scope.row.list ? scope.row.list.split(',').length : 0 }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="试卷时间">
                    <template slot-scope="scope">
                        <div>{{ scope.row.time / 60000 }}分钟</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="开始时间">
                    <template slot-scope="scope">
                        <div v-if="scope.row.startTime">{{ dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="结束时间">
                    <template slot-scope="scope">
                        <div v-if="scope.row.endTime">{{ dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    :width="$ispc ? '300px' : ''"
                    label="操作">
                    <template slot-scope="scope">
                        <div>
                            <div class="hidden-lg-and-down">
                                <el-button
                                type="primary"
                                @click="statistics(scope.row)" icon="el-icon-s-data">统计</el-button>

                                <el-button
                                type="primary"
                                @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>

                                <el-popconfirm
                                style="margin-left: 10px;"
                                icon="el-icon-info"
                                icon-color="red"
                                @confirm="handleDetele(scope.$index, scope.row)"
                                title="确定删除吗？"
                                >
                                    <el-button slot="reference" type="danger">删除</el-button>
                                    <!-- <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button> -->
                                </el-popconfirm>
                            </div>
                            <div class="hidden-xl-only">
                                <el-dropdown @command="command" trigger="click">
                                    <el-button type="primary" plain>
                                        更多
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in btns"
                                        :command="{item,data : scope.row, index : scope.$index}"
                                        :key="index">{{ item }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer-pagination" v-if="data">
            <el-pagination
            @size-change="i => {limit = i;getData(query)}"
            @current-change="i => {page = i;getData(query)}"
            :current-page="page"
            :page-sizes="limits"
            :page-size="limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { getPaperList, delPaper } from '@/api/paper'
    import { mapState } from 'vuex'
    import Query from '@/components/base/query.vue'
    export default {
        components : {
            Query,
        },
        data() {
            return {
                data : {},
                page : 1,
                limit : 10,
                loading : false,
                btns : ['统计', '编辑', '删除'],
                query : {},
                statusList : ['暂停', '启用'],
                showScoreList : ['隐藏', '显示'],
                numberType : ['danger', 'success'],
            }
        },
        computed : {
            ...mapState(['types', 'limits', 'paperTimer'])
        },
        created(){
            this.limit = this.limits[0]
            this.getData()
        },
        methods : {
            handleDetele(index, data){
                this.loading = true
                delPaper(data.id).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.$message.success('删除成功')
                        this.data.records.splice(index, 1)
                    }
                })
            },
            getData(query = {}){
                this.loading = true
                query.limit = this.limit
                query.page = this.page
                this.query = query
                getPaperList(query).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.data = res.data
                    }
                })
            },
            command(data){
                [this.statistics, this.edit, this.del][this.btns.indexOf(data.item)](data.data, data.index)
            },
            statistics(item){
                this.$router.push('/admin/papaerStatistics?id=' + item.id)
            },
            edit(item){
                this.$router.push('/admin/paperEdit?id=' + item.id)
            },
            del(data, index){
                this.$confirm('删除后将不可恢复！', '确定删除吗？')
				.then(() => {
                    this.handleDetele(index, data)
				})
				.catch(() => {});
            },
        }
    }
</script>

<style lang="scss" scoped>
.paper{
    &>div{
        padding: 20px;
        background-color: #fff;
        margin: 10px 0;
        border-radius: 10px;
        .box{
            margin: 20px 0;
            display: flex;
            justify-content: center;
            &>div{
                margin: 0 10px;
            }
        }
    }
    .footer-pagination{
        display: flex;
        justify-content: end;
    }
}
</style>